<template>
   <div>
      <a-month-picker
         @change="onChangeStart"
         :disabledDate="disabledStartDate"
         placeholder="开始日期"
         v-model="startMonth"
      ></a-month-picker>
      ~
      <a-month-picker
         @change="onChangeEnd"
         :disabledDate="disabledEndDate"
         placeholder="结束日期"
         v-model="endMonth"
      ></a-month-picker>
   </div>
</template>

<script>
import moment from 'moment'
import 'moment/locale/zh-cn'
import { monthDiff } from '@/utils/util'

moment.locale('zh-cn')

export default {
   name: 'picker',
   data() {
      return {
         startMonth: null,
         endMonth: null
      }
   },
   created() {

   },
   methods: {
      onChangeStart(date, dateString) {

      },
      onChangeEnd() {
         if (!this.startMonth) {
            this.$message.error('请选择开始日期')
            this.endMonth = null
         }
      },
      // 根据结束日期限制开始日期的可选范围（区间范围为12个月）
      disabledStartDate(startMonth) {
         // 未选择结束日期的时候，开始日期仅限制不能选超过当前月份
         if (!this.endMonth) {
            return startMonth && startMonth > moment().endOf('months')
         }

         let startMonthFormat = new Date(startMonth.format('YYYY'), startMonth.format('M'))
         let endMonthFormat = new Date(this.endMonth.format('YYYY'), this.endMonth.format('M'))
         return monthDiff(startMonthFormat, endMonthFormat) <= 0 || monthDiff(startMonthFormat, endMonthFormat) >= 12
      },
      disabledEndDate(endMonth) {
         // 结束日期不能选超过当前月份，同时不能选小于开始日期,不能选大于开始日期12个月的
         if (this.startMonth) {
            let startMonthFormat = new Date(this.startMonth.format('YYYY'), this.startMonth.format('M'))
            let endMonthFormat = new Date(endMonth.format('YYYY'), endMonth.format('M'))
            return endMonth > moment().endOf('months') || monthDiff(startMonthFormat, endMonthFormat) <= 0 || monthDiff(startMonthFormat, endMonthFormat) >= 12
         }

         return endMonth && (endMonth > moment().endOf('months'))
      }
   }
}
</script>

<style scoped>

</style>
